<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';

import { Calendar, Card, RadioButton } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';

// import { addHoliday, getHolidayList, updateHoliday } from '@/api/holiday/index';
// import { useI18n } from '@/hooks/web/useI18n';
// import { useMessage } from '@/hooks/web/useMessage';

// const { t } = useI18n();
// const { createConfirm, createMessage } = useMessage();

const nowDate = ref<Dayjs>(dayjs(new Date()));
const dateDayLike = ref('');
const showCalendar = ref(false);
// const holidayList = ref([]);
const isClickDay = ref(true);

onMounted(async () => {
  dateDayLike.value = dayjs(nowDate.value).format('YYYY-MM');
  // await getList();
  showCalendar.value = true;
});

// async function getList() {
//   const res = await getHolidayList({ dateDayLike: dateDayLike.value });
//   holidayList.value = res;
// }

// 点击头部面板
const onPanelChange = (value: Dayjs, mode: string) => {
  console.log(value, mode);
  isClickDay.value = false;
};

// 日期
// const getListData = (data: Dayjs) => {
//   if (!(holidayList.value && holidayList.value.length > 0)) return;
//   const yearMonth = dayjs(data).format('YYYY-MM');
//   const yearMonthDay = dayjs(data).format('YYYY-MM-DD');
//   if (yearMonth !== dateDayLike.value) {
//     return '';
//   }
//   const textHtml = '';
//   for (let i = 0; i < holidayList.value.length; i++) {
//     if (yearMonthDay === '27') {
//       textHtml =
//         0 === 0
//           ? '<div style="color:red;">休</div>'
//           : '<div style="color:#626675">班</div>';
//       return textHtml || '';
//     }
//   }
//   return textHtml || '';
// };

// 点击日期
const onSelect = (date: any) => {
  console.log('date', date);
  if (!isClickDay.value) {
    isClickDay.value = true;
    return;
  }
  const yearMonthDay = dayjs(date).format('YYYY-MM-DD');
  const belongToYear = dayjs(date).format('YYYY');
  console.log(yearMonthDay, belongToYear);
  // createConfirm({
  //   iconType: 'warning',
  //   title: () => h('span', t('sys.app.logoutTip')),
  //   content: () => '确认是否修改',
  //   onOk: async () => {
  //     let flag;
  //     const weekDay = getWeekDay(yearMonthDay);
  //     for (const item of holidayList.value) {
  //       if (item.dateDay.split(' ')[0] == yearMonthDay) {
  //         // console.log(item);
  //         flag = item.flag == 0 ? 1 : 0;
  //         await updateHoliday({ flag, id: item.id });
  //         createMessage.success('修改成功');
  //         await getList();
  //         return;
  //       }
  //     }
  //     flag = weekDay == '星期六' || weekDay == '星期日' ? 1 : 0;
  //     await addHoliday({
  //       weekDay,
  //       dateDay: yearMonthDay,
  //       belongToYear,
  //       flag,
  //     });
  //     createMessage.success('修改成功');
  //     await getList();
  //   },
  // });
};

// 禁用非当前月
// function disabledDateFun(data: Dayjs) {
//   const yearMonth = dayjs(data).format('YYYY-MM');
//   return yearMonth !== dateDayLike.value;
// }
// 监听月份变化
watch(
  () => nowDate.value,
  async (newValue, oldValue) => {
    console.log(dayjs(newValue).format('YYYY-MM-DD'));
    const newDay = dayjs(newValue).format('YYYY-MM');
    const oldDay = dayjs(oldValue).format('YYYY-MM');
    if (newDay !== oldDay) {
      showCalendar.value = false;
      dateDayLike.value = newDay;
      // await getList();
      showCalendar.value = true;
    }
  },
);
</script>
<template>
  <div v-loading="!showCalendar" class="holiday">
    <Card>
      <template #title>工作日历</template>
      <template #extra>
        <RadioGrouproup>
          <RadioButton value="horizontal">上月</RadioButton>
          <RadioButton value="vertical">今天</RadioButton>
          <RadioButton value="inline">下月</RadioButton>
        </RadioGrouproup>
      </template>
      <Calendar
        v-model:value="nowDate"
        @on-panel-change="onPanelChange"
        v-if="showCalendar"
        :fullscreen="false"
        @select="onSelect"
      >
        <template #headerRender> </template>
        <!--        <template #dateCellRender="{ current }">-->
        <!--          <div class="events" v-html="getListData(current)"></div>-->
        <!--        </template>-->
      </Calendar>
    </Card>
  </div>
</template>

<style scoped>
.holiday {
  display: flex;
  justify-content: center;
}

.events {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  font-size: 18px;
}
</style>
